<%@ page import="bean.User" %>
<%@ page import="bean.Article" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="bean.Category" %><%--
  Created by IntelliJ IDEA.
  User: 蒋缇
  Date: 2020/10/15
  Time: 14:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    User user=(User)session.getAttribute("user");
    ArrayList<Article> articleArrayList=(ArrayList<Article>)session.getAttribute("userArticles");
    ArrayList<Article> articleCollections=(ArrayList<Article>)session.getAttribute("userCollections");
    ArrayList<Article> articleLikes=(ArrayList<Article>)session.getAttribute("userLikes");
    ArrayList<Category> articleCategories=(ArrayList<Category>)session.getAttribute("userCategories");
%>
<html>
<head>
    <title>分类专栏</title>
    <link rel="stylesheet"  href="css/bootstrap.min.css"/>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/allStyle.css">
</head>
<body>
<%--    导航条--%>
<div class="row">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <%--                    TBLOG标签--%>
                <a class="navbar-brand" href="#">TBLOG</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <%--                    主页链接--%>
                <ul class="nav navbar-nav">
                    <li><a href="websiteHomepage.jsp">首页🏠</a></li>
                    <%--                        下拉菜单--%>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">其他 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <%--                     搜索栏--%>
                <form class="navbar-form navbar-left">
                    <input type="text" id="searchContent" class="form-control" size="125" maxlength="200" placeholder="请输入您想查询的内容">
                    <button type="button" class="btn btn-default" onclick="search()">🔍</button>
                </form>
                <%--                    链接--%>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="writeBlogPage.jsp">创作中心</a></li>
                    <%--                        下拉菜单--%>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="<%=user.getHeadPortrait().equals("")?"images/defaultHeadPortrait.jpg":user.getHeadPortrait()%>" alt="无法加载" class="img-circle" width="20px" height="20px"><span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="personalHompage.jsp">个人中心</a></li>
                            <li><a href="loginPage.jsp">账号设置</a></li>
                            <li><a href="forgetPage.jsp">找回密码</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="successPage.jsp">退出</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
<br><br><br>
<%--        头像--%>
<div class="row">
    <div class="col-lg-3"></div>
    <div class="col-lg-3">
        <img src="<%=user.getHeadPortrait().equals("")?"images/defaultHeadPortrait.jpg":user.getHeadPortrait()%>" id="headPortrait"alt="无法加载" class="img-circle" width="80px" height="80px" ondblclick="$('#headPortraitFile').click()">
        <span><%=user.getAccount()%></span><br>
        <input type="file" id="headPortraitFile" style="display: none"  name="upload"  accept="image/jpg,image/png,image/jpeg,image/bmp,image/gif,image/webp">
    </div>
</div>
<div class="row">
    <div class="col-lg-2"></div>
    <div class="col-lg-1">
        <ul class="list-group" id="mySelect">
            <li class="list-group-item "   style="background-color: white"><a style="text-decoration: none;color: black" href="<%=basePath%>personalHompage.jsp">个人资料</a></li>
            <li class="list-group-item "   style="background-color: white"><a style="text-decoration: none;color: black" href="<%=basePath%>myBlogPage.jsp">我的博客</a></li>
            <li class="list-group-item "   style="background-color: white"><a style="text-decoration: none;color: black" href="<%=basePath%>blogLabelPage.jsp">我的标签</a></li>
            <li class="list-group-item "   style="background-color:#E83737"><a style="text-decoration: none;color: black" href="<%=basePath%>blogCategoryPage.jsp">分类专栏</a></li>
            <li class="list-group-item"    style="background-color: white"><a style="text-decoration: none;color: black" href="<%=basePath%>myCollection.jsp">我的收藏</a></li>
        </ul>
    </div>
    <div class="col-lg-6">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-10"><h4><b>分类专栏</b></h4></div>
                    <div class=col-lg-2"><button type="button" data-toggle="modal" data-target="#addModal" class="btn btn-danger">新建分栏</button></div>
                </div>
                <ul class="list-group">
                    <%
                        if(articleCategories.size()==0){
                    %>
                        <b>您还没有创建自己的分栏</b>
                    <%
                    }else{
                        for(Category category:articleCategories){
                            if(category.getName().equals("默认")){
                    %>
                    <li class="list-group-item" ondblclick="browseCategory('<%=category.getId()%>')">
                        <div class="row">
                            <div class="col-lg-2" ><h5  data-toggle="tooltip" data-placement="top" title="<%=category.getIntro()%>"><%=category.getName()%></h5></div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-lg-4"></div>
                            <div class="col-lg-4"><font style="font-size: 10px">于<%=category.getTime()%>创建</font></div>
                        </div>
                    </li><hr>
                    <%
                        }else{
                    %>
                    <li class="list-group-item" ondblclick="browseCategory('<%=category.getId()%>')">
                        <div class="row">
                            <div class="col-lg-2" ><h5  data-toggle="tooltip" data-placement="top" title="<%=category.getIntro()%>"><%=category.getName()%></h5></div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-lg-4"></div>
                            <div class="col-lg-4"><font style="font-size: 10px">于<%=category.getTime()%>创建</font></div>
                            <div class="col-lg-4">
                                <button class="btn btn-default" onclick="loadModal('<%=category.getName()%>','<%=category.getIntro()%>','<%=category.getId()%>')">编辑</button>
                                <button class="btn btn-default" onclick="deleteCategory('<%=category.getId()%>')">删除</button>
                            </div>
                        </div>
                    </li><hr>
                    <%
                        }}}
                    %>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-lg-3"></div>
</div>
<%--新建分栏模态框--%>
<div class="modal fade" tabindex="-1" id="addModal" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">新建分栏</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-3"><span>分类专栏名称</span></div>
                    <div class="col-lg-9"><input class="form-control" id="addSubfieldName"></div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-lg-3"><span>分类专栏描述</span></div>
                    <div class="col-lg-9"><textarea class="form-control" id="addSubfieldIntro" rows="5"></textarea></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" onclick="addCategory()">新建分栏</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<%--编辑分栏模态框--%>
<div class="modal fade" tabindex="-1" id="updateModal" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">修改分类专栏</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-3"><span>分类专栏名称</span></div>
                    <div class="col-lg-9"><input class="form-control" id="updateSubfieldName"></div>
                </div>
                <hr>
                <div class="row">
                    <input id="updateSubfieldId" style="display: none">
                    <div class="col-lg-3"><span>分类专栏描述</span></div>
                    <div class="col-lg-9"><textarea class="form-control" id="updateSubfieldIntro" rows="5"></textarea></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" onclick="updateCategory()">修改专栏</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="text/javascript">
<%--    新建分栏--%>
    function addCategory(){
        let flag=0;
        let name=document.getElementById("addSubfieldName").value;
        let intro=document.getElementById("addSubfieldIntro").value;
        <%
            for(Category category:articleCategories){
        %>
            if(name==="<%=category.getName()%>")
                 flag=1;
        <%
            }
        %>

        if(name===""){
            alert("分栏名称不能为空");
            return ;
        }else{
            if(intro===""){
                alert("分栏简介不能为空");
                return ;
            }else{
                if(flag===1){
                    alert("分类不能重复");
                    return ;
                }else {
                    $.ajax(
                        {
                            data: {"addArticleCategoryName": name, "addArticleCategoryIntro": intro},
                            dataType: 'text',
                            type: 'post',
                            url: '<%=basePath%>AddCategoryServlet',
                            success: function () {
                                alert("添加成功");
                                window.location = "<%=basePath%>blogCategoryPage.jsp";
                            },
                            error: function () {
                                alert("添加失败");
                            }
                        }
                    );
                }
            }
        }
    }
    function loadModal(name,intro,id){
        document.getElementById("updateSubfieldId").value=id;
        document.getElementById("updateSubfieldIntro").value=intro;
        document.getElementById("updateSubfieldName").value=name;
        $('#updateModal').modal('show');
    }
    //更新分栏
    function updateCategory(){
        let flag=0;
        let id=document.getElementById("updateSubfieldId").value;
        let intro=document.getElementById("updateSubfieldIntro").value;
        let name=document.getElementById("updateSubfieldName").value;
        <%
            for(Category category:articleCategories){
        %>
        if(name==="<%=category.getName()%>"&&intro==="<%=category.getIntro()%>")
            flag=1;
        <%
            }
        %>
        if(name===""){
            alert("分栏名称不能为空");
            return ;
        }else{
            if(intro===""){
                alert("分栏简介不能为空");
                return ;
            }else{
                if(flag===1){
                    alert("您没有修改");
                    return ;
                }else {
                    $.ajax(
                        {
                            data: {"updateArticleCategoryName": name, "updateArticleCategoryIntro": intro,"updateArticleCategoryId":id},
                            dataType: 'text',
                            type: 'post',
                            url: '<%=basePath%>UpdateCategoryServlet',
                            success: function () {
                                alert("修改成功");
                                window.location = "<%=basePath%>blogCategoryPage.jsp";
                            },
                            error: function () {
                                alert("修改失败");
                            }
                        }
                    );
                }
            }
        }
    }
    //删除分栏
    function deleteCategory(id){
        $.ajax(
            {
                data: {"deleteArticleCategoryId":id},
                dataType: 'text',
                type: 'post',
                url: '<%=basePath%>DeleteCategoryServlet',
                success: function () {
                    alert("删除成功");
                    window.location = "<%=basePath%>blogCategoryPage.jsp";
                },
                error: function () {
                    alert("删除失败");
                }
            }
        );
    }
    //查看分栏内容
    function browseCategory(id){
        $.ajax(
            {
                data: {"browseArticleCategoryId":id},
                dataType: 'text',
                type: 'post',
                url: '<%=basePath%>BrowseBlogListServlet',
                success: function () {
                    window.location = "<%=basePath%>blogList.jsp";
                },
                error: function () {
                    alert("查看失败");
                }
            }
        );
    }
</script>
</body>
</html>
